<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>评论</title>

</head>
<body style="margin: 0;">
<div class="ping_lun">评论</div>
<div id="sc_vi">
    <input type="hidden" name="level" value="5">
    <img class="sc_img" src="__PUBLIC__/images/allsc1.png" alt="" id="img_xx" data-id="1" />
    <img class="sc_img" src="__PUBLIC__/images/allsc1.png" alt="" id="img_xx2" data-id="2" />
    <img class="sc_img" src="__PUBLIC__/images/allsc1.png" alt="" id="img_xx3" data-id="3" />
    <img class="sc_img" src="__PUBLIC__/images/allsc1.png" alt="" id="img_xx4" data-id="4" />
    <img class="sc_img" src="__PUBLIC__/images/allsc1.png" alt="" id="img_xx5" data-id="5" />
</div>
<textarea rows="" cols=""  name="remark" class="input_vi" placeholder="请输入" ></textarea>
<button type="button" onclick="submit()"  class="btn_vi">提交</button>
</body>


<style type="text/css">
    .ping_lun{
        text-align: center;
        font-size: 22px;
        margin-top: 20px;
        width: 100%;
    }
    #sc_vi{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-top: 20px;
    }
    .sc_img{
        width: 30px;
        height: 30px;
        margin-left: 4%;
    }
    .input_vi{
        width: 80%;
        height: 300px;
        margin-top: 20px;
        margin-left: 10%;
        font-size: 22px;
    }
    .btn_vi{
        font-size: 22px;
        width: 80%;
        margin-top: 40px;
        margin-left: 10%;
        background-color: #72A642;
        border: 1px solid #72A642;
        color: white;
        height: 50px;
        line-height: 50px;
        border-radius: 50px;
    }
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/layer.js"></script>
<script type="text/javascript">
    window.onload=function(){
        $("#sc_vi img").click(function(e){
            var stat = e.currentTarget.dataset.id
            let index = $('#sc_vi img').index(this);
            console.log(stat);
            console.log(index);
            $("#sc_vi img:lt("+index+1+")").attr('src','__PUBLIC__/images/allsc1.png');
            $("#sc_vi img:gt("+index+")").attr('src','__PUBLIC__/images/allsc2.png');
            $("input[name='level']").val(index+1);
        });

    }

    function submit(){
        let data = {};
        data.level = $("input[name='level']").val();
        data.content = $("textarea[name='remark']").val();
        console.log(data);


        if (data.content == ''){
          return   layer.msg(
                '备注不能为空',
                {
                    icon:2,
                    time:2000
                });
        }
        data.order_id = "{$Think.get.id}";
        $.ajax({
            type : "POST",
            url:"{:U('Order/operate')}",
            data : data,// 你的formid 搜索表单 序列化提交
            dataType:'json',
            success: function(result){
                if (result.status == 200){

                    layer.msg(result.msg,{icon:1,time:2000},function(){if(result.url){ window.history.back(-1);}});
                }else{
                    layer.msg(result.msg,{icon:2,time:2000},function(){if(result.url){ window.location.href = result.url;}});
                }
            }
        });



    }
</script>
</html>
